<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>table</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            body{text-align: center;}
            table tr{text-align: center;}
            #add{margin:10px;}
        </style>
        <script>
            window.onload = function() {
                var oTable = document.getElementById("tb");
                var aTr = oTable.tBodies[0].rows;
                var oDiv = document.getElementById("add");
                var aInput = oDiv.getElementsByTagName("input");
                var aA1 = oTable.tBodies[0].getElementsByTagName("a");
                var addBtn = aInput[2];
                for (var i = 0; i < aTr.length; i++) {
                    var oldColor = "";
                    if (i % 2 == 0) {
                        aTr[i].style.background = "#999";
                    }
                    aTr[i].onmouseover = function() {
                        oldColor = this.style.background;
                        this.style.background = "#ccc";
                    };
                    aTr[i].onmouseout = function() {
                        this.style.background = oldColor;
                    };
                }
                for (var j = 0; j < aA1.length; j++) {
                    aA1[j].onclick = function() {
                        oTable.tBodies[0].removeChild(this.parentNode.parentNode);
                    };
                }
                addBtn.onclick = function() {
                    var sName = aInput[0].value;
                    var sAge = aInput[1].value;
                    var length = aTr.length;
                    var id = aTr[length - 1].getElementsByTagName("td")[0].innerHTML;
                    var tr = document.createElement("tr");
                    var td1 = document.createElement("td");
                    var td2 = document.createElement("td");
                    var td3 = document.createElement("td");
                    var td4 = document.createElement("td");
                    td1.innerHTML = parseInt(id) + 1;
                    td2.innerHTML = sName;
                    td3.innerHTML = sAge;
                    td4.innerHTML = "<a href='javascript:'>删除</a>";
//                    if (aTr.length > 0) {
//                        oTable.tBodies[0].insertBefore(tr, aTr[0]);
//                    }
//                    else {
                    oTable.tBodies[0].appendChild(tr);
//                    }
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    td4.getElementsByTagName("a")[0].onclick = function() {
                        oTable.tBodies[0].removeChild(this.parentNode.parentNode);
                    };
                };
            };
        </script>
    </head>
    <body>
        <div id="add">
            姓名：<input type="text"/>
            年龄：<input type="text"/>
            <input type="button" value="添加"/>
        </div>
        <table id="tb" border="1" width="500" align="center">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张生</td>
                    <td>23</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>65</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>孙一</td>
                    <td>3</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>李静</td>
                    <td>73</td>
                    <td><a href="javascript:">删除</a></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
